<template>
  <view class="content">
    <view class="navigationBox">
      <image class="returnImg" src="../../static/img/return.png" mode="" @tap="go('../index/home')"></image>
      <view class="title">
        嗨词商学院
      </view>
      <image class="addImg" src="../../static/img/add.png" mode="" @tap="go('../college/addCollege')"></image>
      <image class="searchImg" src="../../static/img/search.png" mode="" @tap="searchShow()">
      </image>
    </view>
    <view class="searchBox" v-if="searchShowStatus == true">
      <view class="pickerBox">
        <view class="iptBox pickerItem">
          <input class="ipt" type="text" placeholder="输入关键词" placeholder-class="iptPla" v-model="info.search_data">
          <view class="searchBtn" @tap="getSearch()">
            搜索
          </view>
        </view>
      </view>
    </view>
    <u-tabs class="tabs" :list="tabs" keyName="category_name" @click="changeTab"></u-tabs>
    <view class="list">
      <view class="list-box flex" v-for="(item,index) in list" @tap="goStudentDetail(item.article_id)">
        <image class="cover_image" :src="item.cover_image" mode=""></image>
        <view class="item_content">
          <view class="title">
            {{item.article_title}}
            <text class="time">[{{item.create_time}}]</text>
          </view>
          <view class="c-66 middle">
            {{item.article_synopsis}}
          </view>
          <view class="time" style="margin: 0;">
            [{{item.business_article_category.category_name}}]
            [已读{{item.read_num}}]
          </view>
        </view>
        <view class="btn-box flex">
          <view class="update-btn" @tap.stop="goEditStudent(item.article_id)">编辑</view>
          <view class="delete-btn" @tap.stop="deleteStudent(item.article_id)">删除</view>
        </view>
      </view>
    </view>

    <!-- 删除弹框 -->
    <u-modal :show="deleteShow" @confirm="deleteConfirm" ref="uModal" :asyncClose="true" :showCancelButton="true"
      @cancel="deleteCancel">
      <view style="width: 100%;text-align: center;">
        确认删除该文章信息吗？
      </view>
    </u-modal>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        info: {
          search_data: '',
          category_id: 0,
          page: 1,
          size: 10
        },
        list: [],
        searchShowStatus: false,
        current: 0,
        tabs: [],
        pageSize: 10,
        pageTotal: 0,
        hasMore: true,
        delete_article_id: '',
        deleteShow: false
      };
    },
    onLoad() {
      this.getArticleCategoryList()
      this.getData()
    },
    onReachBottom() {
      this.getData();
    },
    methods: {
      async getArticleCategoryList() {
        const {
          data: res
        } = await uni.$http.post('school/article/getArticleCategoryList')
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
        this.tabs = res.data
      },
      searchShow() {
        if (this.searchShowStatus == false) {
          this.searchShowStatus = true;
        } else {
          this.searchShowStatus = false;
        }
      },
      changeTab(e) {
        this.info.category_id = e.id
        this.info.page = 1
        this.list = []
        this.getData();
      },
      getSearch() {
        this.info.page = 1
        this.list = []
        this.getData();
      },
      confirm(e) {
        this.info.start_date = e[0].replace(/-/g, "/");
        this.info.end_date = e[e.length - 1].replace(/-/g, "/");
        this.show = false
      },
      confirmHour(e) {
        this.hourText = e.value[0].label
        this.info.type = e.value[0].id
        this.hourShow = false
      },
      async getData() {
        uni.stopPullDownRefresh();
        const {
          data: res
        } = await uni.$http.post('school/article/getArticleList', this.info)
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        if (res.data.data.length) {
          this.list = this.list.concat(res.data.data);
          this.info.page += 1;
        } else {
          this.toast.msg('没有更多数据了！')
        }
      },

      deleteStudent(id) {
        this.delete_article_id = id
        this.deleteShow = true
      },
      async deleteConfirm() {
        const {
          data: res
        } = await uni.$http.post('school/article/delArticle', {
          article_id: this.delete_article_id
        })
        if (res.code != 1) {
          this.deleteCancel()
          return this.toast.msg(res.msg)
        }
        this.toast.msg('删除成功')
        this.info.page = 1
        this.list = []
        this.getData();
        this.deleteCancel()
      },
      deleteCancel() {
        this.deleteShow = false
        this.delete_article_id = ''
      },
      goEditStudent(id) {
        uni.navigateTo({
          url: `/pages/college/editCollege?article_id=${id}`
        })
      },
      goStudentDetail(id) {
        uni.navigateTo({
          url: `/pages/college/seeCollege?article_id=${id}`
        })
      }
    }
  }
</script>

<style lang="scss">
  .content {
    .navigationBox {
      display: flex;
      align-items: center;
      height: 112rpx;
      padding: 50rpx 30rpx 0 51rpx;

      .returnImg {
        width: 52rpx;
        height: 52rpx;
      }

      .title {
        flex: 1;
        text-align: center;
      }

      .addImg {
        width: 23rpx;
        height: 23rpx;
      }

      .searchImg {
        width: 30rpx;
        height: 30rpx;
        margin-left: 30rpx;
      }
    }

    .searchBox {
      width: 670rpx;
      margin: 0 auto;
      padding: 0 20rpx;

      .pickerBox {
        font-size: 28rpx;
        height: 66rpx;
        line-height: 66rpx;
        display: flex;
        width: 100%;

        .pickerItem {
          display: flex;
          width: 100%;

          .frame {
            position: relative;
            width: 192rpx;
            text-align: center;
            color: #666666;
            border: 2rpx solid #FCF7F7;

            .lower {
              width: 42rpx;
              height: 42rpx;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 10rpx;
            }
          }
        }
      }

      .iptBox {
        display: flex;

        .ipt {
          box-sizing: border-box;
          width: 75%;
          height: 66rpx;
          padding-left: 75rpx;
          border: 2rpx solid #FCF7F7;
          border-radius: 10rpx;
        }

        .iptPla {
          height: 66rpx;
          line-height: 66rpx;
          color: #999;
          font-size: 22rpx;
        }

        .searchBtn {
          display: inline-block;
          background: #A6A6A6;
          width: 25%;
          height: 66rpx;
          line-height: 66rpx;
          text-align: center;
          border-radius: 10rpx;
          margin-left: 20rpx;
          font-size: 24rpx;
        }
      }
    }

    .list {
      width: 90%;
      margin-left: 5%;
      margin-top: 20rpx;
    }

    .list-box {
      position: relative;
      height: 220rpx;
      border-radius: 5px;
      background: #F5F5F5;
      margin-bottom: 30rpx;
      padding: 10rpx 15rpx;

      .cover_image {
        width: 152rpx;
        height: 152rpx;
      }

      .item_content {
        font-size: 22rpx;
        min-height: 152rpx;
        margin-left: 15rpx;
        width: 480rpx;

        .time {
          margin-left: 20rpx;
          color: #999999;
          font-size: 19rpx;
        }

        .middle {
          width: 480rpx;
          overflow: hidden;
          /* 确保超出容器的文本被隐藏 */
          text-overflow: ellipsis;
          /* 超出部分显示省略号 */
          height: 92rpx;
        }
      }

      .btn-box {
        position: absolute;
        right: 20rpx;
        bottom: 10rpx;
        height: 46rpx;
      }
    }

    .update-btn {
      width: 70rpx;
      height: 30rpx;
      border-radius: 8.76rpx;
      background: #4E88E6;
      color: #FFFFFF;
      font-size: 22rpx;
      text-align: center;
      line-height: 30rpx;
    }

    .delete-btn {
      width: 70rpx;
      height: 30rpx;
      border-radius: 8.76rpx;
      background: #4E88E6;
      color: #FFFFFF;
      font-size: 22rpx;
      text-align: center;
      line-height: 30rpx;
      background: #D43030;
      margin-left: 10rpx;
    }

    .tabs {
      margin-top: 20rpx;
    }

    .item {
      display: flex;
      align-items: center;
      padding: 0 35rpx 0 19rpx;
      width: 100%;
      height: 78rpx;
      line-height: 78rpx;
      border-radius: 10rpx;
      border: 2rpx solid #FCF7F7;
      margin-top: 20rpx;

      .label {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        margin-right: 70rpx;
        width: 140rpx;
      }

      .ipt {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
        color: #666;
      }
    }
  }
</style>